---
import StarlightThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
import ChallengesSignupPopover from "../shaderhunt/ChallengesSignupPopover.astro";
---

<div>
  <a href="/TypeGPU/getting-started">Docs</a>
</div>
<div>
  <a href="/TypeGPU/examples">Examples</a>
</div>
<ChallengesSignupPopover>
  <div>
    <a href="/TypeGPU/examples">Challenges</a>
  </div>
</ChallengesSignupPopover>
<div>
  <a href="/TypeGPU/blog">Blog</a>
</div>
<StarlightThemeSelect>
  <slot />
</StarlightThemeSelect>

<style>
  div {
    border-inline-end: 1px solid var(--sl-color-gray-5);
    display: none;
    padding-inline-end: 1rem;
  }

  @media (min-width: 50rem) {
    div {
      display: flex;
    }
  }

  a {
    color: var(--sl-color-text-accent);
    font-weight: 600;
    text-decoration: none;
  }
</style>
